<template>
  <div>
    <div>
      <van-nav-bar
              title="实时监测"
              fixed
      />
    </div>
    <div class="content0">
      <div style="text-align: left">
        <span class="contentTitle">实时数据</span>
      </div>
<!--      实时数据框-->
      <div class="dataBorder">
<!--        桥梁图模块-->
        <div class="bridgeBorder">
            <img class="bridgeBorderPic" src="../../assets/bridgePic.png" alt="">
        </div>
<!--        相关数据模块-->
        <div class="dataRelevant">
            <div class="dataRelevantItem0">
                <div class="dataRelevantItem0Child">
                    <!--                对应的图标-->
                    <div class="dataRelevantItem0ChildImg">
                        <img class="dataRelevantItem0ChildPic" src="../../assets/ambient.png" alt="">
                    </div>
                    <!--                对应的数据值-->
                    <div>
                        <span class="dataRelevantItem0ChildNum oneDisplay">{{ambientData}}</span>
                        <span class="dataRelevantItem0ChildNum twoText">环境荷载</span>
                    </div>
                </div>
            </div>
            <div class="dataRelevantItem0">
                <div class="dataRelevantItem0Child">
                    <!--                对应的图标-->
                    <div class="dataRelevantItem0ChildImg">
                        <img class="dataRelevantItem0ChildPic" src="../../assets/whole.png" alt="">
                    </div>
                    <!--                对应的数据值-->
                    <div>
                        <span class="dataRelevantItem0ChildNum oneDisplay">{{wholeData}}</span>
                        <span class="dataRelevantItem0ChildNum twoText">整体响应</span>
                    </div>
                </div>
            </div>
            <div class="dataRelevantItem0">
                <div class="dataRelevantItem0Child">
                    <!--                对应的图标-->
                    <div class="dataRelevantItem0ChildImg">
                        <img class="dataRelevantItem0ChildPic" src="../../assets/local.png" alt="">
                    </div>
                    <!--                对应的数据值-->
                    <div >
                        <span class="dataRelevantItem0ChildNum oneDisplay">{{localData}}</span>
                        <span class="dataRelevantItem0ChildNum twoText">局部响应</span>
                    </div>
                </div>
            </div>
            <div class="dataRelevantItem0">
                <div class="dataRelevantItem0Child">
                    <!--                对应的图标-->
                    <div class="dataRelevantItem0ChildImg">
                        <img class="dataRelevantItem0ChildPic" src="../../assets/video.png" alt="">
                    </div>
                    <!--                对应的数据值-->
                    <div >
                        <span class="dataRelevantItem0ChildNum oneDisplay">{{videoData}}</span>
                        <span class="dataRelevantItem0ChildNum twoText">视频监控</span>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
<!--      实时数据-->
    <div class="content1">
          <div style="text-align: left">
              <span class="contentTitle">实时</span>
              <span class="contentSelect">
                  <el-select
                          v-model="condeValue"
                          placeholder="请选择测点"
                          size="small"
                          :popper-append-to-body="false"
                          @change="changeCondeValue"
                  >
                <el-option
                        v-for="item in selOptions"
                        :key="item.id"
                        :label="item.code"
                        :value="item.id"
                >
                </el-option>
            </el-select>
              </span>
          </div>
          <!--      实时索力数据-->
          <div class="dataBorder1">
              <CommonLineChart
                      :loadingFlag="loadingFlag1"
                      :abnormal="abnormalFlage1"
                      :title="currentTitle"
                      :xAxisData="MonitoringPointPlotData.xAxisData"
                      :seriesData="MonitoringPointPlotData.seriesData"
                      :infoObj="infoObj"
                      :selOptions="selOptions"
                      @clickHeadAction="clickChild"
              ></CommonLineChart>
          </div>
      </div>
<!--      历史数据-->
      <div class="content1">
          <div style="text-align: left">
              <span class="contentTitle">历史</span>
<!--              <el-button @click="onChangeOen">点击事件</el-button>-->
<!--              <el-button @click="onChangeOen1">点击事件</el-button>-->
          </div>
          <!--      索力数据-->
          <div class="dataBorder1">
              <CommonLineChart
                      :loadingFlag="loadingFlag2"
                      :abnormal="abnormalFlage2"
                      :title="historyTitle"
                      :xAxisData="MonitoredPointPlotData.xAxisData"
                      :seriesData="MonitoredPointPlotData.seriesData"
                      :infoObj="infoObj"
                      :selOptions="historySelOptions"
                      @clickHeadAction='clickChildHistory'
                      ref="CommonLineCharted"
              ></CommonLineChart>
          </div>
      </div>
      <!--      超限数据-->
      <div class="content1">
          <div style="text-align: left">
              <span class="contentTitle">超限</span>
          </div>
          <!--      索力数据-->
          <div class="dataBorder1">
              <CommonLineChart
                      :loadingFlag="loadingFlag3"
                      :abnormal="abnormalFlage3"
                      :title="OverrunTitle"
                      :xAxisData="OverrunPointPlotData.xAxisData"
                      :seriesData="OverrunPointPlotData.seriesData"
                      :infoObj="infoObj"
                      :selOptions="historySelOptions"
                      ref="CommonLineChartedOverrun"
              ></CommonLineChart>
          </div>
      </div>
  </div>
</template>
<script>
  import { NavBar } from 'vant';
  import CommonLineChart from "./CommonLineChart";
  import requistApi from "@/api";
  import commonFn from "@/utils/commonFn";
  import monitoring from "../../api/monitoring";
export default {
  components: {CommonLineChart},
  data() {
    return {
        realtimerData: null,
        loadingFlag1: false,
        loadingFlag2: false,
        loadingFlag3: false,
        abnormalFlage1: false,
        abnormalFlage2: false,
        abnormalFlage3: false,
        historyTitle: '暂无数据',
        currentTitle: '暂无数据',
        OverrunTitle: '暂无数据',
        // 下面是静态界面的死数据
        xAxisData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
        seriesData: [0.00, 0.40, 0.20, 0.50, 0.30, 0.50, 0.70, 0.80, 0.10, 0.40, 0.30, 0.80, 0.50],
        xAxisData1: ['00:00', '01:00', '02:00', '05:00', '07:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
        seriesData1: [0.00, 0.10, 0.70, 0.20, 0.80, 0.20, 0.10, 0.00, 0.50, 0.30, 0.70, 0.10, 0.30],
        infoObj: {
            max: '2.445mm/s',
            min: '-2.224mm/s',
            average: '0.235mm/s',
            variance: '0.213'
        },
        // 桥梁测点数据
        selOptions: [{
            code: '测定001',
            id: '001'
        }],
        historySelOptions: [{
            code: '测定001',
            id: '001'
        }],
        ambientData: 6250, // 环境荷载统计数据
        wholeData: 6250, // 整体响应统计数据
        localData: 6250, // 局部响应统计数据
        videoData: 6250, // 视频监控统计数据
        // 下面是页面参数变量
        bridgeId: '', // 桥梁ID
        monitorListData: [], // 监测数据
        bridgePointData: [], // 桥梁测点数据
        bridgePointDataList: [], // 桥梁测点数据(处理）
        BridgeMonitorParams: {
            ownId: null,
            pageSize: null,
            pageNum: null
        }, // 传入参数获取桥梁下所有测点
        // 选中测点（实时，历史，超限）的测点
        condeValue: '',
        // 选中测点下的传感器ID和code值
        paramsSensor:{
            sensorId: '',
            sensorCode: ''
        },
        MonitoringBridgePointId: '', // 实时选中的桥梁测点ID
        MonitoredBridgePointId: '', // 历史选中的桥梁测点ID
        MonitoringPointPlotData: {
            xAxisData: [],
            seriesData: [],
            infoObj: {}
        }, // 实时监测点的绘点数据
        MonitoredPointPlotData: {
            xAxisData: [],
            seriesData: [],
            infoObj: {}
        }, // 历史监测点的绘点数据
        OverrunPointPlotData: {
            xAxisData: [],
            seriesData: [],
            infoObj: {}
        }, // 超限监测点的绘点数据
        MonitoringListData: [], // 接受实时测点返回的数据
        MonitoredListData: [], // 接受历史测点返回的数据
        OverrunListData: [], // 接受超限测点返回的数据
        // 历史曲线传入的数据
        historicalCurveData: {
            bridgeId: '',
            sensorId: '',
            sensorCode: '',
            beginTime: this.getHistoryDate(2),
            endTime: this.getCurrentDate(2),
            // beginTime: '2020-11-09 14:37:18',
            // endTime: '2020-11-09 14:47:18'
        },
        // 超限曲线传入的数据
        OverrunCurveData: {
            bridgeId: '',
            sensorId: '',
            sensorCode: '',
            beginTime: this.getHistoryDate(2),
            endTime: this.getCurrentDate(2),
            // beginTime: '2020-11-09 14:37:18',
            // endTime: '2020-11-09 14:47:18'
        },
        // 实时曲线传入的数据
        currentCurveData: {
            bridgeId: '',
            sensorId: '',
            sensorCode: '',
        }
    }
  },
  methods: {
      // 验证错误的事件
      // onChangeOen() {
      //     this.MonitoredPointPlotData.seriesData = this.seriesData
      //     this.MonitoredPointPlotData.xAxisData = this.xAxisData
      // },
      // onChangeOen1() {
      //     this.MonitoredPointPlotData.seriesData = this.seriesData1
      //     this.MonitoredPointPlotData.xAxisData = this.xAxisData1
      // },


      // 获取实时监测  ( 环境荷载  整体响应  局部响应  视频监控 )列表数据
      getMonitorDataList(id = this.bridgeId) {
          requistApi.monitoring
              .getMonitorData(id, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      this.monitorListData = res.data.data
                      this.ambientData = this.monitorListData.find(item =>item.name == '环境荷载').allNumber
                      this.wholeData = this.monitorListData.find(item =>item.name == '整体响应').allNumber
                      this.localData = this.monitorListData.find(item =>item.name == '局部响应').allNumber
                      this.videoData = this.monitorListData.find(item =>item.name == '视频监控').allNumber
                  }
              }).catch(err => {
                  console.log(err)
          });
      },
      // 获取原生通过链接传过来的参数
      getParams() {
          let token = commonFn.getQueryVariable("token") || "";
          let appkey = commonFn.getQueryVariable("app-key") || "FB";
          return { token, appkey };
      },
      // 获取实时监测所有桥梁测点的数据.。。。。。。。。。。测点
      getMonitorBridgeIDDataList(transmitId = this.BridgeMonitorParams) {
          requistApi.monitoring
              .getBridgePointData(transmitId, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      this.bridgePointData = res.data.data
                      this.bridgePointData.instanceList.map(item => {
                          this.bridgePointDataList.push({
                              code: item.code,
                              id: item.id
                          })
                      })
                      this.selOptions = this.bridgePointDataList  // 实时图形
                      this.historySelOptions = this.bridgePointDataList  // 历史图形
                  }
              }).catch(err => {
              console.log(err)
          });
      },
      // 获取当前时间
      getCurrentDate(format) {
          var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth();//得到月份
          var date = now.getDate();//得到日期
          var day = now.getDay();//得到周几
          var hour = now.getHours();//得到小时
          var minu = now.getMinutes();//得到分钟
          var sec = now.getSeconds();//得到秒
          month = month + 1;
          if (month < 10) month = "0" + month;
          if (date < 10) date = "0" + date;
          if (hour < 10) hour = "0" + hour;
          if (minu < 10) minu = "0" + minu;
          if (sec < 10) sec = "0" + sec;
          var time = "";
          //精确到天
          if(format==1){
              time = year + "-" + month + "-" + date;
          }
          //精确到分
          else if(format==2){
              time = year + "-" + month + "-" + date+ " " + hour + ":" + minu + ":" + sec;
          }
          return time;
      },
      // 获取当前时间
      getHistoryDate(format) {
          var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth();//得到月份
          var date = now.getDate();//得到日期
          var day = now.getDay();//得到周几
          var hour = now.getHours();//得到小时
          var minu = now.getMinutes() + 10;//得到分钟
          var sec = now.getSeconds();//得到秒
          month = month + 1;
          if (month < 10) month = "0" + month;
          if (date < 10) date = "0" + date;
          if (hour < 10) hour = "0" + hour;
          if (minu < 10) minu = "0" + minu;
          if (sec < 10) sec = "0" + sec;
          var time = "";
          //精确到天
          if(format==1){
              time = year + "-" + month + "-" + date;
          }
          //精确到分
          else if(format==2){
              time = year + "-" + month + "-" + date+ " " + hour + ":" + minu + ":" + sec;
          }
          return time;
      },
      // 获取实时荷载下的实时监测数据
      getMonitoringDataList(currentCurveData) {
          requistApi.monitoring
              .getMonitoringData(currentCurveData, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      let xAxisData = []
                      let seriesData = []
                      this.MonitoringListData = res.data.data
                      this.MonitoringListData.map(item => {
                          xAxisData.push(item.time)
                          seriesData.push(item.value)
                      })
                      this.MonitoringPointPlotData.seriesData = seriesData
                      this.MonitoringPointPlotData.xAxisData = xAxisData
                      this.currentTitle = this.currentCurveData.sensorCode
                      this.loadingFlag1 = false
                  }
              }).catch(err => {
              this.loadingFlag1 = false
              this.abnormalFlage1 = true
              console.log(err)
          });
      },
      // 获取实时荷载下的历史监测数据
      getMonitoredDataList(historicalCurveData) {
          requistApi.monitoring
              .getMonitoredData(historicalCurveData, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      let xAxisData = []
                      let seriesData = []
                      this.MonitoredListData = res.data.data
                      this.MonitoredListData.map(item => {
                          xAxisData.push(item.time)
                          seriesData.push(item.value)
                      })
                      this.MonitoredPointPlotData.seriesData = seriesData
                      this.MonitoredPointPlotData.xAxisData = xAxisData
                      // this.$refs.CommonLineCharted.incomingEvent() // 调用子组件的方法渲染
                      this.historyTitle = this.historicalCurveData.sensorCode
                      this.loadingFlag2 = false
                      var _this = this
                      setTimeout(function(){
                          // 等待20秒后调用实时数据和超限数据
                          _this.clickChild(historicalCurveData)
                          _this.clickChildOverrun(historicalCurveData)
                      },20000)
                  } else {
                      this.MonitoredPointPlotData = {}
                      this.loadingFlag2 = false
                      this.abnormalFlage2 = true
                      this.historyTitle = '暂无数据'
                  }
              }).catch(err => {
              this.loadingFlag1 = false
              this.loadingFlag2 = false
              this.loadingFlag3 = false
              this.abnormalFlage2 = true
              console.log(err)
          });
      },
      // 获取实时荷载下的历史监测数据
      getOverrunDataList(OverrunCurveData) {
          requistApi.monitoring
              .getOverrunData(OverrunCurveData, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      let xAxisData = []
                      let seriesData = []
                      this.OverrunListData = res.data.data
                      this.OverrunListData.map(item => {
                          xAxisData.push(item.time)
                          seriesData.push(item.value)
                      })
                      this.OverrunPointPlotData.seriesData = seriesData
                      this.OverrunPointPlotData.xAxisData = xAxisData
                      // this.$refs.CommonLineCharted.incomingEvent() // 调用子组件的方法渲染
                      this.OverrunTitle = this.OverrunCurveData.sensorCode
                      this.loadingFlag3 = false
                      this.abnormalFlage3 = false
                      this.realtimerFuc()  // 超限数据完成后启动实时数据的计时器，来循环调用
                  } else {
                      this.OverrunPointPlotData = {}
                      this.loadingFlag3 = false
                      this.abnormalFlage3 = true
                      this.OverrunTitle = '暂无数据'
                  }
              }).catch((e)=> {
              this.loadingFlag3 = false
              this.abnormalFlage3 = true
              console.log(e);
          });
      },
      // 子组件向父组件传递变量从而调用该事件----实时数据
      clickChild(clickHeadAction) {
          console.log('实时数据')
          // this.currentCurveData.bridgeId = '758323582542544896'
          // this.currentCurveData.sensorId = '1'
          // this.currentCurveData.sensorCode = 'GWD-03-01'
          this.currentCurveData.bridgeId = this.bridgeId
          this.currentCurveData.sensorId = clickHeadAction.sensorId
          this.currentCurveData.sensorCode = clickHeadAction.sensorCode
          this.getMonitoringDataList(this.currentCurveData)
      },
      // 子组件向父组件传递变量从而调用该事件-----历史数据
      clickChildHistory(clickHeadAction) {
          console.log('历史数据')
          // this.historicalCurveData.bridgeId = '758323582542544896'
          // this.historicalCurveData.sensorId = '1'
          // this.historicalCurveData.sensorCode = 'GWD-03-01'
          this.historicalCurveData.bridgeId = this.bridgeId
          this.historicalCurveData.sensorId = clickHeadAction.sensorId
          this.historicalCurveData.sensorCode = clickHeadAction.sensorCode
          this.getMonitoredDataList(this.historicalCurveData)
      },
      // 子组件向父组件传递变量从而调用该事件-----超限数据
      clickChildOverrun(clickHeadAction) {
          console.log('超限数据')
          // this.OverrunCurveData.bridgeId = '758323582542544896'
          // this.OverrunCurveData.sensorId = '1'
          // this.OverrunCurveData.sensorCode = 'GWD-03-01'
          this.OverrunCurveData.bridgeId = this.bridgeId
          this.OverrunCurveData.sensorId = clickHeadAction.sensorId
          this.OverrunCurveData.sensorCode = clickHeadAction.sensorCode
          this.getOverrunDataList(this.OverrunCurveData)
      },
      // 选中的测点改变（实时，历史，超限）调用的事件
      changeCondeValue(id) {
          this.getSensorListData(id)
          this.loadingFlag1 = true
          this.loadingFlag2 = true
          this.loadingFlag3 = true
      },
      // 获取测点下传感器的数据
      getSensorListData(sensorID) {
          requistApi.monitoring
              .getSensorData(sensorID, this.getParams())
              .then((res) => {
                  if (
                      res.data.data !== undefined &&
                      JSON.stringify(res.data.data) !== "{}"
                  ) {
                      this.paramsSensor.sensorCode = res.data.data[0][0].code
                      this.paramsSensor.sensorId = res.data.data[0][0].id
                      this.clickChildHistory(this.paramsSensor)
                  }
              }).catch(err => {
              console.log(err)
          });
      },
      // 这个是调用实时数据的计时器函数
      realtimerFuc() {
          let tiemThis = this
          this.realtimerData = setInterval(function () {
              tiemThis.clickChild()
          }, 5000)
      },
      // 这个是清除调实时数据计时器函数的方法
      cancelRequest(val) {
          console.log('清除实时数据定时器')
          // alert('清除实时数据定时器')
          this.adress = val
          window.clearInterval(this.realtimerData)
      }

  },
  activated: {},
  deactivated: {},
  mounted() {
    this.bridgeId = commonFn.getQueryVariable("bridgeId") || "758323582542544896";
    // this. BridgeMonitorParams.ownId = commonFn.getQueryVariable("ownId") || "758341733233721344"; ——ownId 和桥梁 ID 一样（后端定义问题）
    this. BridgeMonitorParams.ownId = commonFn.getQueryVariable("bridgeId") || "758341733233721344";
    this. BridgeMonitorParams.pageSize = commonFn.getQueryVariable("pageSize") || "15";
    this. BridgeMonitorParams.pageNum = commonFn.getQueryVariable("pageNum") || "1";
    // 实时数据进来的第一个桥梁测点数据
    this.MonitoringBridgePointId = commonFn.getQueryVariable("bridgeId") || "758341733233721344";
    this.getMonitorDataList(); // 获取实时监测  ( 环境荷载  整体响应  局部响应  视频监控 )列表数据
    this.getMonitorBridgeIDDataList() // 获取桥梁下所有测点

      // 安卓调用vue方法并传参
      window['cancelRequest'] = val => {
        this.cancelRequest(val)
      }
  },
}
</script>
<style lang="scss" scoped>
  .content0{
    margin-top: 33px;
    padding: 10px;
  }
  .bridgeBorder{
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0 35px;
      .bridgeBorderPic{
          padding-top: 10px;
          width: 289px;
          height: 142.5px;
      }
  }
  .contentTitle{
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333333;
  }
  .contentSelect{
      float: right;
      right: 20px;
      top: 5px;
      height: 30px;
      /*height: 8px;*/
      /*width: 94px;*/
      ::v-deep input{
          font-size: 12px;
          height: 25px;
          -webkit-transform: scale(0.3);
          transform: scale(0.3);
      }
      &>div{
          height: 100%;
          &>::v-deep span{
              transform: scale(0.6);
              padding: 6px;
              &>span{
                  ::v-deep .is-reverse{
                      transform: none;
                      color: green;
                  }
              }
          }
      }
  }
  .dataBorder{
    width: 354.5px;
    height: 237.5px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
    border-radius: 4px;
      .dataRelevant{
          /*margin-top: 20px;*/
          padding: 6px;
          display: flex;
          justify-content: space-between;
          .dataRelevantItem{
              width: 80px;
              height: 38.5px;
              background: #FFFFFF;
              box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
              border-radius: 4px;
          }
          .dataRelevantItem0{
              width: 80px;
              height: 38.5px;
              background: #FFFFFF;
              box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
              border-radius: 4px;
              .dataRelevantItem0Child{
                  height: 100%;
                  display: flex;
                  padding: 5px 8px;
                  justify-content: space-between;
                  .dataRelevantItem0ChildNum{
                      display: block;
                      text-align: center;
                  }
                  .oneDisplay{
                      height: 18px;
                      font-size: 12px;
                      line-height: 18px;
                  }
                  .twoText{
                      height: 18px;
                      font-size: 5px;
                      line-height: 18px;
                      white-space:nowrap;
                      overflow:hidden;
                      text-overflow:ellipsis;
                  }
                  @media only screen and (max-width: 1500px) { .twoText{ font-size: 12px; }}
                  .dataRelevantItem0ChildPic{
                      width: 15px;
                      height: 15px;
                      margin: 0 auto;
                  }
                  .dataRelevantItem0ChildImg{
                      line-height: 15px;
                      height: 100%;
                      text-align: center;
                      /*padding: 5px 0;*/
                  }
              }
          }
      }
  }
  .content1{
      padding: 10px;
      .dataBorder1{
          margin: 10px 0px;
          width: 354.5px;
          height: 187px;
          background: #FFFFFF;
          box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
          border-radius: 8px;
      }
  }
  .el-input--small .el-input__inner {
      height: 0.6333rem;
      line-height: 0.6333rem;
  }
  ::v-deep .el-input__icon {
      height: auto;
  }
  ::v-deep .el-input--small .el-input__icon {
      line-height: 0.6333rem;
  }
  ::v-deep .van-nav-bar__title {
      color:  #4880FF;
      font-size: 18px;
  }
</style>
